<template>
	<div class="payment-page">
		<!-- 商品清单 -->
		<div class="product-section">
			<div class="section-title">活动订单详情</div>
			<div style="font-size: 15px;margin-bottom: 10px;">订单编号：{{ activity_order_sn }}</div>
			<div>订单状态：
			<text style="font-size: 18px;color: #07c160;" v-if="data.activity_activity_order_status==10">已支付</text>
			<text style="font-size: 18px;color: #ff692f;" v-if="data.activity_order_status==-1">退款中</text>
			<text style="font-size: 18px;color: red;" v-if="data.activity_order_status==-2">拒绝退款</text>
			<text style="font-size: 18px;color: darkgray;" v-if="data.activity_order_status==-10">已退款</text>
			</div>
			<div style="margin-top: 10px;" v-if="data.activity_order_status==-2">拒绝退款原因：<text style="color: red;">{{ data.reason_rejection }}</text></div>
			<div style="margin-top: 10px;" v-if="data.activity_order_status==-2||data.activity_order_status==-10||data.activity_order_status==-1">申请退款的原因：<text style="color: red;">{{ data.refund_reason }}</text></div>
			<div class="product-list">
				<div class="product-item">
					<img :src="data.activity_cover_path" class="product-image" />
					<div class="product-info">
						<div class="product-name">{{ data.activity_title }}</div>
						<div class="product-time">
							{{ data.activity_spec_data.activity_start_at }}-{{ data.activity_spec_data.activity_end_at }}
						</div>
					</div>
				</div>
			</div>
			<div class="product-footer">
				<div class="product-price">￥{{ data.total_activity_price }}元/位</div>
			</div>
		</div>

		<!-- 支付方式 -->
		<div class="payment-method">
			<div class="section-title">支付方式</div>
			<div class="method-item" @click="selectPayment('wechat')">
				<img src="https://shalong.taiyanyue.top/images/st-weixinzhifu1.png" class="payment-icon" />
				<div class="method-name">微信支付</div>
				<img v-if="paymentMethod === 'wechat'" src="https://shalong.taiyanyue.top/images/fa5-check-circle-fas1.png" class="selected-icon" />
				<img v-else src="https://shalong.taiyanyue.top/images/weixuanz.png" class="unselected-icon" />
			</div>
		</div>
	</div>
</template>

<script>
	import {
		order_getActivityOrderDetails
	} from '@/api/system/user.js'
	export default {
		data() {
			return {
				paymentMethod: 'wechat',
				orderData: {},
				user_first_name: "",
				user_last_name: "",
				user_phone: "",
				phoneError: "",
				activity_order_sn:'',
				data:{}
			}
		},
		computed: {
		},
		onLoad(options) {
			if (options.data) {
				const receivedData = JSON.parse(decodeURIComponent(options.data));
				console.log('接收到的数据:', receivedData);
				this.activity_order_sn = receivedData.activity_order_sn;
				this.order_getActivityOrderDetails()
			}
		},
		methods: {
			async order_getActivityOrderDetails(){
				const data = await order_getActivityOrderDetails({activity_order_sn:this.activity_order_sn})
			    if(data.code==200){
					this.data=data.content.data;
				}
			},
			selectPayment(method) {
				this.paymentMethod = method;
			},
		}
	}
</script>

<style scoped>
	.payment-page {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 90px;
		padding-top: 10px;
	}
	
	/* 公共样式 */
	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
	}
	
	/* 商品清单样式 */
	.product-section {
		background: #fff;
		margin: 0 12px 10px;
		padding: 15px;
		border-radius: 12px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
	}
	
	.product-item {
		display: flex;
		padding: 10px 0;
	}
	
	.product-image {
		width: 80px;
		height: 80px;
		margin-right: 12px;
		border-radius: 8px;
		object-fit: cover;
	}
	
	.product-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.product-name {
		font-size: 15px;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.product-time {
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}
	
	.product-footer {
		display: flex;
		justify-content: flex-end;
		margin-top: 15px;
		padding-top: 10px;
		border-top: 1px solid #f5f5f5;
	}
	
	.product-price {
		font-size: 16px;
		color: #369a68;
		font-weight: bold;
	}
	
	/* 用户信息样式 */
	.user-info-section {
		background: #fff;
		margin: 0 12px 10px;
		padding: 15px;
		border-radius: 12px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
	}
	
	.input-group {
		margin-bottom: 15px;
	}
	
	.input-label {
		font-size: 14px;
		color: #666;
		margin-bottom: 8px;
	}
	
	.custom-input {
		width: 100%;
		height: 44px;
		border: 1px solid #eee;
		border-radius: 8px;
		padding: 0 12px;
		font-size: 14px;
		background-color: #f9f9f9;
		transition: all 0.3s;
	}
	
	.custom-input:focus {
		border-color: #369a68;
		background-color: #fff;
	}
	
	.error-message {
		font-size: 12px;
		color: #ff4d4f;
		margin-top: 5px;
	}
	
	/* 支付方式样式 */
	.payment-method {
		background: #fff;
		padding: 15px;
		margin: 0 12px 10px;
		border-radius: 12px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
	}
	
	.method-item {
		display: flex;
		align-items: center;
		padding: 12px 0;
	}
	
	.payment-icon {
		width: 24px;
		height: 24px;
		margin-right: 12px;
	}
	
	.method-name {
		flex: 1;
		font-size: 15px;
		color: #333;
	}
	
	.selected-icon,
	.unselected-icon {
		width: 20px;
		height: 20px;
	}
	
	/* 底部支付栏样式 */
	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding: 10px 15px;
		border-top: 1px solid #f0f0f0;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	}
	
	.total-amount {
		flex: 1;
	}
	
	.total-amount span {
		font-size: 14px;
		color: #666;
	}
	
	.amount {
		font-size: 20px;
		color: #369a68;
		font-weight: bold;
		margin-left: 5px;
	}
	
	.pay-button {
		background: #369a68;
		color: #fff;
		border: none;
		border-radius: 22px;
		height: 44px;
		width: 150px;
		font-size: 16px;
		font-weight: bold;
		transition: all 0.3s;
	}
	
	.disabled-button {
		background: #ccc;
		color: #999;
	}
</style>